<template>
    <div class="special-box">
        <panel-com title="最新专题">
            <template #right>
                 <!-- 右侧内容区域 -->
                 <span>查看更多></span>
            </template>
            <div class="box">
                <div v-for="item in SpecialList" :key="item.id">
                    <RouterLink to="/" class="image">
                        <img :src="item.cover" alt="" />
                        <div class="tit">
                            <p>
                                <span class="top">{{item.title}}</span>
                                <span class="bot">{{item.summary}}</span>
                            </p>
                            <span class="price">￥{{item.lowestPrice}}起</span>
                        </div>
                    </RouterLink>
                    <div class="foot">
                        <span>
                            <i class="iconfont icon-hart1"></i>
                            {{item.collectNum}}
                        </span>
                        <span>
                            <i class="iconfont icon-see"></i>
                            {{item.replyNum}}
                        </span>
                        <span class="rep">
                            <i class="iconfont icon-message"></i>
                            {{item.viewNum}}
                        </span>
                    </div>
                </div>
            </div>
        </panel-com>
    </div>
</template>

<script>
import PanelCom from './products/children/PanelCom.vue'
export default {
  components: { PanelCom },
    name:"SpecialView",
    data(){
        return {
            SpecialList:[]
        }
    },
    async created() {
        let res = await this.$http.Special();
        this.SpecialList = res.data.result;
    },
}
</script>

<style scoped lang="scss">
.special-box{
    background: #f5f5f5;
    width: 100%;
    .box{
        height: 380px;
        padding-bottom: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        >div{
           width: 404px;
           background: #fff;
           transition: all .5s;
            &:hover {
                transform: translate3d(0, -6px, 0);
                box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
            }
            .image{
                width: 404px;
                display: block;
                width: 100%;
                height: 288px;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                .tit{
                    background-image: linear-gradient(0deg,rgba(0,0,0,.8),transparent 50%);
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 288px;
                    > p{
                        box-sizing: border-box;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        padding-left: 16px;
                        width: 70%;
                        height: 70px;
                        .top{
                            line-height: 30.8px;
                            color: #fff;
                            font-size: 22px;
                            display: block;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }
                        .bot{
                            line-height: 30.8px;
                            display: block;
                            font-size: 19px;
                            color: #999;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }
                    }
                    .price{
                        position: absolute;
                        bottom: 25px;
                        right: 16px;
                        line-height: 1;
                        padding: 4px 8px 4px 7px;
                        color: #cf4444;
                        font-size: 17px;
                        background-color: #fff;
                        border-radius: 2px;
                        box-sizing: border-box;
                    }
                }
            }
            .foot{
                box-sizing: border-box;
                height: 72px;
                line-height: 72px;
                padding: 0 20px;
                font-size: 16px;
                span{
                    float: left;
                    margin-right: 25px;
                    vertical-align: middle;
                }
                .rep{
                    float: right;
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>